<template>
  <div>
    <div class="ls-dialog__trigger" @click="onTrigger">
      <!-- 触发弹窗 -->
      <slot name="trigger"></slot>
    </div>
    <el-dialog coustom-class="ls-dialog__content" :title="flag==true?'发货':'物流查询'" :visible="visible" width="70vw"
               :top="top" :modal-append-to-body="false" center :before-close="close" :close-on-click-modal="false">

      <div style="height:75vh;overflow-x:hidden" v-loading="orderData.length == 0">
        <!-- 商品信息 -->
        <div>
          <div class="nr weight-500 m-b-20">商品信息</div>

          <el-table :data="orderData.order_goods" ref="paneTable1" style="width: 100%" size="mini"
                    :summary-method="getSummaries" :show-summary="true">
            <el-table-column label="序号" prop="id" width="75"></el-table-column>
            <el-table-column label="商品信息" min-width="300">
              <template slot-scope="scope">
                <div class="flex m-t-10">
                  <el-image :src="scope.row.goods_image" style="width: 58px; height: 58px"
                            class="flex-none">
                  </el-image>
                  <div class="m-l-8 flex-1">
                    <div class="line-2">
                      {{scope.row.goods_name}}
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="" min-width="150"></el-table-column>
            <el-table-column prop="spec_value_str" label="商品规格" min-width="150"></el-table-column>
            <el-table-column prop="goods_price" label="商品价格" min-width="80">
              <template slot-scope="scope">
                ¥{{scope.row.goods_price}}
              </template>
            </el-table-column>
            <el-table-column prop="goods_num" label="购买数量" min-width="120"></el-table-column>
            <el-table-column label="优惠金额" prop="discount_price" min-width="80">
              <template slot-scope="scope">
                ¥{{scope.row.discount_price}}
              </template>
            </el-table-column>
            <el-table-column label="商品实付总额" prop="total_pay_price" min-width="180">
              <template slot-scope="scope">
                ¥{{scope.row.total_pay_price}}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 收货信息 -->
        <div class="m-t-30" v-if="flag == true">
          <div class="nr weight-500 m-b-20">收货信息</div>

          <div class="flex">
            <div class="m-r-24">收货人： {{orderData.contact}}</div>
            <div class="m-r-24">收货人手机号码： {{orderData.mobile}}</div>
            <div class="m-r-24">收货人地址： {{orderData.delivery_address}}</div>
          </div>
        </div>

        <!-- 物流配送 -->
        <div class="m-t-30" v-if="flag == true">
          <div class="nr weight-500 m-b-20">物流配送</div>

          <div class="flex">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="配送方式">
                <el-radio v-model="form.send_type" :label="1">需要物流</el-radio>
                <el-radio v-model="form.send_type" :label="2">无需物流</el-radio>
              </el-form-item>

              <el-form-item label="物流公司" v-if="form.send_type == 1">
                <el-input style="width: 530px" placeholder="请输入快递单号" v-model="form.invoice_no">
                  <template slot="prepend">
                    <div>
                      <el-select style="width: 120px" v-model="form.express_id" placeholder="请选择">
                        <el-option :label="item.name" :value="item.id"
                                   v-for="(item,index) in orderData.express" :key="index"></el-option>
                      </el-select>
                    </div>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="发货备注">
                <el-input class="m-t-10" style="width: 530px" type="textarea" :rows="7" placeholder="请输入内容"
                          v-model="form.remark">
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 物流信息 -->
        <div class="m-t-30" v-if="flag == false">
          <div class="nr weight-500 m-b-20">物流信息</div>

          <div class="flex">
            <div class="m-r-24">发货时间： {{orderData.express_time}}</div>
            <div class="m-r-24">物流公司： {{orderData.express_name || '无'}}</div>
            <div class="m-r-24">物流单号 {{orderData.invoice_no || '无'}}</div>
          </div>
        </div>

        <!-- 物流轨迹 -->
        <div class="m-t-30" v-if="flag == false">
          <div class="nr weight-500 m-b-20">物流轨迹</div>

          <div v-if="orderData.send_type == 1">
            <el-table :data="orderData.traces" ref="paneTable" style="width: 100%" size="mini">
              <el-table-column label="日期" prop="0" min-width="205"></el-table-column>
              <el-table-column label="轨迹" prop="1" min-width="405"></el-table-column>
            </el-table>
          </div>
          <div v-else class="nr weight-500 m-t-60 flex row-center">
            无需物流
          </div>
        </div>
      </div>

      <!-- 底部弹窗页脚 -->
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleEvent('cancel')">取消</el-button>
        <el-button size="small" @click="handleEvent('confirm')" v-if="flag==true" type="primary">发货</el-button>
        <el-button size="small" @click="handleEvent('cancel')" v-else type="primary">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import {
  apiOrderDeliveryInfo,
  apiOrderLogistics,
  apiOrderDelivery,
} from "@/api/order/order";
@Component
export default class OrderLogistics extends Vue {
  @Prop({ default: "5vh" }) top!: string | number; //弹窗的距离顶部位置
  @Prop({ default: "0" }) id!: string | number; //订单ID
  @Prop({ default: true }) flag!: Boolean; //是发货还是物流查询 true为发货 ，false为物流查询
  @Prop({ default: "" }) isShow!: string;

  /** S Data **/
  visible = false; //是否

  fullscreenLoading = false; //加载方式

  // 物流订单信息
  orderData: any = {
    traces: {}
  };

  // 发货表单
  form: any = {
    send_type: 1, //	是	int	配送方式:1-快递配送;2-无需快递
    express_id: "", //	是(配送方式为1时必选)	int	订单id
    invoice_no: "", //	是(配送方式为1时必选)	int	订单id
    remark: "", //	否	varchar	发货备注
  };

  /** E Data **/

  /** S Method **/

  // 获取订单信息 flag 为 true的时候执行
  getOrderDeliveryInfo() {
    apiOrderDeliveryInfo({ id: this.id }).then((res) => {
      this.orderData = res;
      this.fullscreenLoading = false;
    });
  }

  // 获取物流查询
  getOrderLogistics() {
    apiOrderLogistics({ id: this.id }).then((res) => {
      this.orderData = res;
      this.fullscreenLoading = false;
    });
  }

  // 发货
  orderDelivery() {
    apiOrderDelivery({
      id: this.id,
      ...this.form,
    }).then((res) => {
      this.$emit("update", "");

      this.getOrderLogistics();
    });
  }

  // 商品信息的底部结算信息
  getSummaries(param: any) {
    const { columns, data } = param;
    const sums: any = [];
    columns.forEach((column: any, index: any) => {
      if (index === 0) {
        sums[2] = "总价";
        return;
      }
      const values = data.map((item: any) =>
          Number(item[column.property])
      );
      if (!values.every((value: any) => isNaN(value))) {
        if (index == 4) return;
        sums[index] = values.reduce((prev: any, curr: any) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        if (index !== 5 && index !== 3) {
          sums[index] = "¥" + sums[index].toFixed(2)
        }
      }
    });

    return sums;
  }

  // 点击取消
  handleEvent(type: "cancel" | "confirm") {
    if (type === "cancel") this.close();
    if (type === "confirm") {
      if (this.flag) {
        if (this.form.send_type == 1) {
          if (this.form.express_id == "")
            return this.$message.error("请选择快递公司");
          if (this.form.invoice_no == "")
            return this.$message.error("请填写快递单号");
        }
      }

      this.orderDelivery();
      this.close();
    }
  }

  // 打开弹窗
  onTrigger() {
    this.fullscreenLoading = true;
    this.flag == true
        ? this.getOrderDeliveryInfo()
        : this.getOrderLogistics();
    console.log("打开弹窗再请求");
    this.visible = true;
  }

  // 关闭弹窗
  close() {
    this.visible = false;
  }

  // @Watch('isShow')
  // changeShow(value: any) {
  //     console.log(value)
  // }
}
</script>

<style lang="scss" scoped>
.header-input {
  width: 220px !important;
}
</style>
